<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/common.css"/>
		<title>$!{course.courseName}</title>
		<style type="text/css">
			.col{
				color: #24A4F5;
			}
			.bg{
				background-color: #24A4F5;
			}
			.titlename{
				padding: 8px 0 8px 6px;
			}
			.chengji{
				display: flex;
				justify-content: space-around;
			}
			.fenshu ,.tishu {
				border: 1px solid #dcdcdc;
				width: 45%;
				border-radius: 6px;
				padding: 20px 0;
				text-align: center;
			}
			.center{
				display: flex;
				justify-content: space-between;
				padding: 14px 10px;
				border-bottom: 1px dashed #DCDCDC;
			}
			.center-title{
				font-size: 14px;
				font-weight: 500;
				height: 26px;
				line-height: 26px;
			}
			.but{
				display: flex;
				background-color: #24A4F5;
				padding:1px;
				font-size: 12px;
				border-radius: 18px;
			}
			.pd4{
				width: 58px;
				height: 26px;
				line-height: 26px;
				text-align: center;
			}
			.allQue{
				color: #fff;
			}
			.allQue1{
				background-color: #fff;
				color: #24A4F5;
				border-radius:  18px 0 0 18px;
			}
			.errQue{
				background-color: #fff;
				color: #24A4F5;
				border-radius: 0 18px 18px 0;
			}
			.errQue1{
				color: #fff;
			}
			.item{
				padding: 10px 8px;
				border-bottom:  1px dashed #DCDCDC;
			}
			.item div{
				line-height: 32px;
			}
			.sort{
				display: flex;
				width: 92%;
				margin: 12px auto 6px;
			}
			.sort_1{
				width: 25%;
				background-color: #09f;
				color: #fff;
				text-align: center;
				padding: 16px 0;
				border-radius: 6px 0 0 6px;
			}
			.sort_1 p{
				font-size: 16px;
			}
			.sort_1 span{
				font-size: 14px;
			}

			.sort_2{
				text-align: center;
				padding: 16px 0;
				border: 1px solid #f2f2f2;
				width: 75%;
				border-radius: 0 6px 6px 0;
			}
			.sort_2 p{
				font-size: 16px;
			}
			.sort_2 span{
				font-size: 14px ;
				color: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<div class="title">
				#if($!{isShowSort})
				<div class="sort">
					<div class="sort_1">
						<p>1</p>
						<span>名次</span>
					</div>
					<div class="sort_2">
						<p>太棒了！</p>
						<span>参与人数：$!{joinNum}</span>
					</div>
				</div>
				#end
				#if($!{isShowSort2})
				<div class="sort">
					<div class="sort_1">
						<p>$!{mingCi}</p>
						<span>名次</span>
					</div>
					<div class="sort_2">
						<p>战胜了$!{bili}%的人</p>
						<span>参与人数：$!{joinNum}</span>
					</div>
				</div>
				#end
				<div class="titlename">
					<span>成绩单</span>
				</div>
				<div class="chengji" >
					<div class="fenshu">
						<p>$!{examResult.grades}/100</p>
						<p class="col">您的得分</p>
					</div>
					<div class="tishu">
						<p>$!{examResult.successNum}/5</p>
						<p class="col">答对题数</p>
					</div>
				</div>
			</div>
			<div class="center">
				<div class="center-title">
					<span>答题解析</span>
				</div>
				<div class="but">
					<div id="allQue" class="pd4 allQue">
						<span>全部题目</span>
					</div>
					<div id="errQue" class="pd4 errQue">
						<span>错题集</span>
					</div>
				</div>
			</div>
			<div class="queList">
				<div class="list">
					#foreach($!{detail} in $!{examResult.detailList})
					#set($index = ${velocityCount})
					<div class="item">
						<div><p>${index}.  $!{detail.examPaper.name}<span style="color: #ccc;">[分值：20]</span></p></div>
						<div>
							<p>您的答案：$!{detail.myAnswer.context}
								#if($!{detail.isCorrect} == "0")
								<span style="color: red;">×</span>
								#end
								#if($!{detail.isCorrect} == "1")
								<span style="color: #24A4F5;">（得分：20）</span>
								#end
							</p>
						</div>
						#if($!{detail.isCorrect} == "0")
						<div style="color: #24A4F5;">
							<p>正确答案为：$!{detail.examPaper.answer.context}</p>
						</div>
						#end
					</div>
					#end
				</div>
			</div>
			<div class="errList">
				<div class="list">
					#foreach($!{detail} in $!{examResult.errorList})
					#set($index = ${velocityCount})
					<div class="item">
						<div><p>${index}.$!{detail.examPaper.name}<span style="color: #ccc;">[分值：20]</span></p></div>
						<div>
							<p>您的回答：$!{detail.myAnswer.context}
								#if($!{detail.isCorrect} == "0")
								<span style="color: red;">×</span>
								#end
							</p>
						</div>
						#if($!{detail.isCorrect} == "0")
						<div style="color: #24A4F5;">
							<p>正确答案为：$!{detail.examPaper.answer.context}</p>
						</div>
						#end
					</div>
					#end
				</div>
			</div>
		</div>
	</body>
</html>
<script src="$!{basePath}/app/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '$!{appId}', // 必填，公众号的唯一标识
		timestamp: "$!{wx.timestamp}", // 必填，生成签名的时间戳
		nonceStr: "$!{wx.nonceStr}", // 必填，生成签名的随机串
		signature: "$!{wx.signature}",// 必填，签名，见附录1
		jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.ready(function(){
		var shareData = {
			title: '$!{share.title}', // 分享标题
			desc: '$!{share.context}', // 分享描述
			link: '$!{share.url}', // 分享链接
			imgUrl: '$!{share.imgUrl}', // 分享图标
		};
		wx.onMenuShareTimeline({
			title: '$!{share.title}', // 分享标题
			desc: '$!{share.context}',
			link: '$!{share.url}', // 分享链接,将当前登录用户转为puid,以便于发展下线
			imgUrl: '$!{share.imgUrl}', // 分享图标
			success: function () {
				alert('分享成功');
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
		wx.onMenuShareAppMessage(shareData);
		wx.onMenuShareQQ(shareData);
		// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
		// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	});
	wx.error(function(res){
		//alert("==============error" + res)
	});
	let bl=false
	$(".queList").show()
	$(".errList").hide()
	$("#allQue").click(function(){
		$(".queList").show()
		$(".errList").hide()
		$(this).attr("class","pd4 allQue")
		$("#errQue").attr("class","pd4 errQue")
	})
	$("#errQue").click(function(){
		$(".errList").show()
		$(".queList").hide()
		$(this).attr("class","pd4 errQue1")
		$("#allQue").attr("class","pd4 allQue1")
	})
</script>